<template>
  <header class="header_wrap" :class="headClass" :style="{backgroundColor: showHeaderBg}">
    <slot name="left" class="router_back">
      <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
    </slot>
    <h3 class="title">
      <slot></slot>
    </h3>
    <slot name="right" class="header_right"></slot>
  </header>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'headTop',
  computed: {
    ...mapState([
      'scroll'
    ]),
    // Gradient header background
    showHeaderBg () {
      if (this.headClass === 'transparent_header' || this.headClass === 'no_back') {
        return this.scroll.withTop > 100 ? 'rgba(255, 158, 39, 1)' : `rgba(255, 158, 39, ${this.scroll.withTop / 100})`;
      }
    }
  },
  props: [
    'headClass'
  ],
  methods: {
  }
};
</script>
<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .header_wrap {
    width: 100%;
    height: 90px;
    line-height: 90px;
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 90;
    background-color: $color;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    transition: background-color .5s;
    font-size: 26px;
    &.white_header{
      background-color: #fff;
      color: #333;
      .header_right{
        color: $color;
      }
    }
    &.transparent_header{
      background-color: rgba(255, 255, 255, 0);
      color: #333;
      .header_right{
        color: $color;
      }
    }
    &.no_back{
      background-color: rgba(255, 255, 255, 0);
      color: #333;
      .icon-fanhui{
        display: none;
      }
    }
    .header_right{
      color: $color;
    }
    i.iconfont{
      font-size: 30px;
      width: 50px;
    }
    .title {
      font-size: 34px;
      font-weight: normal;
      color: inherit;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
</style>
